<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<body>

    <button onclick="handlePause()">终止</button>
    <button onclick="start()">开始</button>

    <script>
        // 利用promise.race方法，用一个快的promise来终止执行一个慢的promise
        // Promise.race 只要有一个 promise 的状态发生了变化，不管是 resolve 还是 reject 都会忽略掉其他的 promise 的 resolve 还是 reject
        const cancelablePromise = () => {
            let isReject = false
            return {
                run() {

                    return Promise.race([
                        new Promise((resolve, reject) => {
                            setTimeout(() => {
                                console.log('我是用来终止执行的，只有需要终止，我才会改变promise的状态');
                                if (isReject) {
                                    resolve('调用了终止执行-------》')
                                }
                            }, 1000)
                        }),
                        new Promise((resolve, reject) => {
                            setTimeout(() => {
                                console.log('我是要执行的，终止也会执行到我，只是状态不会改变，不会resolve');
                                resolve('执行我了')
                            }, 3000)
                        })
                    ])

                },
                cancel() {
                    isReject = true

                }
            }
        }



        const { run, cancel } = cancelablePromise()

        function start() {
            run().then((err) => {
                console.log(err);
            })
        }

        function handlePause() {
            cancel()
        }

    </script>
</body>

</html>